<!--
* description: 内饰颜色
* author: ligy
* createdDate: 2020-12-5
-->
<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="dynamicApiConfig"
      :dynamic-buttons="dynamicButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="dynamicTableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :dynamic-is-show-select="false"
      :dynamic-export-converts="dynamicExportConverts"
      :refresh-table-key="refreshTableKey"
      @hiddenColData="hiddenColData"
    />
    <Edit
      v-if="dialogShow"
      :is-dialog-visible.sync="dialogShow"
      :data-for-form="editRowData"
      :title-name="titleName"
      @closeEdit="closeEdit"
    />
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import api from '@/api/vehicleManagement'
import OneTableTemplate from '@/components/templates/oneTable'
import { exportExcel } from '@/utils/getTimeString'
import Edit from './edit'
import Vue from 'vue'

export default {
  name: 'VeInteriorColor',
  components: {
    OneTableTemplate,
    Edit
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      }
    )
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      titleName: '内饰颜色维护',
      refreshTableKey: '0',
      dialogShow: false,
      editPopupsState: 'add',
      editRowData: {},
      // table表格查询API配置对象
      dynamicApiConfig: api.veInteriorColor,
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '颜色编码：',
              codeField: 'carInColorCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              isMul: false
            },
            {
              compKey: 'compKey2',
              labelName: '颜色名称：',
              codeField: 'carInColorName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              isMul: false
            },
            {
              compKey: 'compKey3',
              labelName: '状态：',
              labelWidth: 1000,
              codeField: 'isEnableCode',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'AsId,AsText',
              options: [
                { AsId: '1', AsText: '启用' },
                { AsId: '0', AsText: '停用' }
              ],
              type: 'inputText',
              isMust: true,
              isMul: false
            }
          ],
      // form 的表单对象
      formField: this.$utils.getFormField(
        this,
        {
          carInColorCode: '',
          carInColorName: '',
          isEnableCode: '1'
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      // 动态组件-按钮
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
            {
              compKey: 'btnKey0',
              type: '',
              size: 'small',
              name: 'export',
              position: 'left',
              clickEvent: () => this.exportExcelAll(),
              text: this.$t('sys.button.export') // 导出
            },
            {
              compKey: 'btnKey1',
              type: 'primary',
              size: 'small',
              name: 'search',
              clickEvent: () => this.queryTable(1),
              text: '查询'
            },
            {
              compKey: 'btnKey2',
              type: '',
              size: 'small',
              name: 'reset',
              clickEvent: () => this.reset(),
              text: '重置'
            }
          ],
      // 动态组件-表格网格列
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
            {
              label: '操作',
              minWidth: 180,
              fixed: true,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '编辑',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: index => this.edit(index)
                }
              ]
            },
            {
              prop: 'carInColorId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'carInColorCode',
              label: '内饰颜色编码'
            },
            {
              prop: 'carInColorName',
              label: '内饰颜色名称',
              align: 'center'
            },
            {
              prop: 'carInColorPrice',
              label: '价格'
            },
            {
              prop: 'isEnableCode',
              label: '状态'
            }
          ]
    }
  },
  mounted() {
    // 列表查询
    const that = this
    setTimeout(function() {
      that.queryTable(1)
    }, 1000)
  },
  methods: {
    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    },
    // 深拷贝
    // deepCopy(obj) {
    //   const res = obj instanceof Array ? [] : {}
    //   for (const [k, v] of Object.entries(obj)) {
    //     res[k] = typeof v === 'object' ? this.deepCopy(v) : v
    //   }
    //   return res
    // },

    // 新增--编辑
    edit(index) {
      this.dialogShow = true
      this.editRowData = this.$refs['multipleTable'].list[index]
    },

    // 关闭编辑页面
    closeEdit(type) {
      this.dialogShow = false
      // 新增或编辑成功后操作
      if (type === 1) {
        // 调查询接口
        // this.queryTable(1);
      }
    },
    exportExcelAll() {
      exportExcel(this.formField, '/mp/e3sh/vesale/basics/carInColorService/exportCarInColor.do', '', '内饰颜色维护')
      // const myDate = new Date()
      // const year = myDate.getFullYear()
      // const month = myDate.getMonth()
      // const realMonth = month + 1
      // const date = myDate.getDate()
      // this.$requestAPI({
      //   apiUrl: '/mp/e3sh/basics/ve/carInColorService/exportCarInColor.do',
      //   variables: { dataType: 'excel', ...this.formField }
      // }).then(res => {
      //   this.$utils.downloadFile(
      //     res,
      //     `内饰颜色维护${year}-${realMonth}-${date}.xlsx`
      //   )
      // })
    }
  }
}
</script>
